np<template>
    <div id="background">
        <el-card class="box-card1"  v-if="step === 1">
            <h2 style="color:ghostwhite">重置密码</h2>
            <el-form
                :model="resetPasswordForm"
                status-icon
                :rules="rules"
                ref="resetPasswordForm"
                label-position="left"
                label-width="80px"
                class="reset-password-form"
            >
                <el-form-item label="邮箱" prop="email" class="rlForm">
                    <el-input type="email" v-model="resetPasswordForm.email"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpsw" class="rlForm">
                    <el-input type="password" v-model="resetPasswordForm.newpsw" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password" class="rlForm">
                    <el-input type="password" v-model="resetPasswordForm.password" autocomplete="off" show-password></el-input>
                </el-form-item>
            </el-form>
            <div class="btnGroup" style="margin-top: 50px">
                <el-button type="primary" @click="submitForm('resetPasswordForm')" v-loading="loading">提交</el-button>
                <el-button @click="resetForm('resetPasswordForm')">清空</el-button>
                <el-button type="success" @click="goBack" style="margin-left: 200px">返回</el-button>
            </div>
        </el-card>

        <!-- 新框体用于第二步输入验证码 -->
        <el-card class="box-card2" v-if="step === 2">
            <h2 style="color:ghostwhite">输入验证码</h2>
            <el-form :model="resetPasswordForm" :rules="rules" ref="resetPasswordForm">
                <el-form-item label="验证码" prop="code" class="rlForm">
                    <el-input v-model="resetPasswordForm.code" autocomplete="off"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitCode" style="margin-top: 20px">验证</el-button>
                <el-button @click="goBack" style="margin-left: 275px;margin-top: 20px">返回</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码！"));
            } else {
                if (this.resetPasswordForm.password !== "") {
                    this.$refs.resetPasswordForm.validateField("password");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码！"));
            } else if (value !== this.resetPasswordForm.newpsw) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            step: 1,
            resetPasswordForm: {
                newpsw: "",
                password: "",
                email: "",
                code: "",
            },
            rules: {
                newpsw: [{ required: true, validator: validatePass, trigger: "blur" }],
                password: [{ required: true, validator: validatePass2, trigger: "blur" }],
                email: [{ type: "email", message: "请输入正确的邮箱地址！", required: true, trigger: "blur" }],
                code: []
            },
            loading: false
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                this.loading = true;
                if (valid && this.step === 1) {
                    this.axios({
                        url: "https://apifoxmock.com/m1/4767131-4420546-default/api/reset_password",
                        method: "get",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            password: this.resetPasswordForm.password,
                            email: this.resetPasswordForm.email,
                            code: this.resetPasswordForm.code
                        }
                    }).then((res) => {
                        if (res.status === 200) {
                            this.$message({
                                message: "邮件已发送，请检查您的邮箱进行验证。",
                                type: "success",
                            });
                            this.step = 2;  // 切换到验证码输入步骤
                            this.rules.code = [{ required: true, message: "请输入验证码！", trigger: "blur" }];
                        } else {
                            this.$message({
                                message: res.data.message,
                                type: "warning",
                            });
                        }
                        this.loading = false;
                    });
                } else {
                    console.log("表单填写有误！");
                    this.loading = false;
                    return false;
                }
            });
        },
        submitCode() {
            this.$refs.resetPasswordForm.validateField('code', (valid) => {
                if (valid) {
                    this.loading = true;
                    this.axios({
                        url: "https://apifoxmock.com/m1/4767131-4420546-default/api/reset_password_verify",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: JSON.stringify({  // 使用 JSON.stringify 确保数据格式为 JSON
                            code: this.resetPasswordForm.code
                        })
                    }).then((res) => {
                        if (res.status === 200) {
                            this.$message({
                                message: "邮箱验证成功！",
                                type: "success",
                            });
                            // 进行下一步操作
                             this.$router.push('/plclogin');
                        } else {
                            this.$message({
                                message: '邮箱验证失败！',
                                type: "warning",
                            });
                        }
                        this.loading = false;
                    });
                } else {
                    console.log("验证码错误！");
                    this.loading = false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        goBack() {
            this.$router.go(-1);
        },
    }


};
</script>

<style scoped>
.box-card1 {
    margin: auto;
    border: 2px;
    width: 500px;
    height: 400px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)  !important;
    background: rgba(45, 52, 54, 0.7);
}
.box-card2 {
    margin: auto;
    border: 2px;
    width: 500px;
    height: 250px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)  !important;
    background: rgba(45, 52, 54, 0.7);
}
button {
  opacity: 0.8;
}
</style>

